<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { queryEmpJobApi,queryEmpSexApi} from '@/api/empReport'
import { ElMessage } from 'element-plus'

// 柱状图相关代码保持不变...
const jobChartRef  = ref(null)
let jobChartInstance  = null

// 新增饼图相关代码
const sexChartRef = ref(null)
let sexChartInstance = null

// 获取统计数据
const fetchStats  = async () => {
  try {
    // 获取职位数据
    const jobResult  = await queryEmpJobApi()
    if (jobResult .code) {
      initJobChart(jobResult .data.jobList, jobResult .data.dataList)
    }

    // 获取性别数据
    const sexResult = await queryEmpSexApi()
    if (sexResult.code) {
      initSexChart(sexResult.data)
    }
  } catch (error) {
    ElMessage.error('获取职位统计数据失败')
  }
}

// 初始化图表
const initJobChart  = (jobList, dataList) => {
  if (!jobChartRef.value) return
  
  // 如果已有图表实例，先销毁
  if (jobChartInstance) {
    jobChartInstance.dispose()
  }
  
  // 初始化图表
  jobChartInstance  = echarts.init(jobChartRef.value)
  
  // 设置图表配置项
  const option = {
    title: {
      text: '员工职位统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: ''
      },
      formatter: '{b}: {c}人'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: jobList,
      axisLabel: {
        rotate: 0,
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      axisLine: {
        show: true
      },
      axisTick: {
        show: true
      }
    },
    series: [
      {
        name: '人数',
        type: 'bar',
        barWidth: '60%',
        data: dataList,
        label: {
          show: true,
          position: 'top',
          formatter: '{c}人'
        }
      }
    ]
  }
  
  // 应用配置项
  jobChartInstance.setOption(option)
}

// 新增初始化饼图方法
const initSexChart = (data) => {
  if (!sexChartRef.value) return
  
  if (sexChartInstance) {
    sexChartInstance.dispose()
  }
  
  sexChartInstance = echarts.init(sexChartRef.value)
  
  const option = {
    title: {
      text: '员工性别统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: data.map(item => item.name)
    },
    series: [{
      name: '性别分布',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '18',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data.map(item => ({
        value: item.value,
        name: item.name
      }))
    }]
  }
  
  sexChartInstance.setOption(option)
}

// 统一处理窗口resize
const handleResize = () => {
  jobChartInstance && jobChartInstance.resize()
  sexChartInstance && sexChartInstance.resize()
}

onMounted(() => {
  fetchStats()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  jobChartInstance?.dispose()
  sexChartInstance?.dispose()
})

</script>

<template>
<div class="dual-chart-container">
    <!-- 左侧柱状图 -->
    <div class="chart-wrapper">
      <div ref="jobChartRef" class="chart"></div>
    </div>
    
    <!-- 右侧饼图 -->
    <div class="chart-wrapper">
      <div ref="sexChartRef" class="chart"></div>
    </div>
  </div>
</template>

<style scoped>
.dual-chart-container {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.chart-wrapper {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-width: 0; /* 防止内容溢出 */
}

.chart {
  width: 100%;
  height: 400px;
}

/* 响应式设计 - 移动端堆叠显示 */
@media (max-width: 768px) {
  .dual-chart-container {
    flex-direction: column;
  }
}
</style>